<template>
  <view>
    <tn-popup
      v-model="isPopupVisible"
      width="80%"
      top=""
      open-direction="top"
      :overlay-opacity="0.05"
      :radius="25">
      <view class="tn-m-sm tn-p-sm tn-pt-xl tn-mt-xl">
        <view class="tn-mb-xl tn-mt-xl tn-pt-xl">
          <tn-title
            size="lg"
            title="密码操作"
            mode="hLine"
            sub-title="Password"
            assist-color="tn-blue" />
        </view>
        <tn-form ref="formDataRef" :model="formData" label-position="top">
          <tn-form-item label="密码">
            <tn-input v-model="formData.password"></tn-input>
          </tn-form-item>

          <tn-form-item label="确认密码">
            <tn-input v-model="formData.confirmPassword"></tn-input>
          </tn-form-item>
          <view class="tn-flex justify-between">
            <tn-button
              :shadow="true"
              shadow-color="tn-grey"
              @click="confirm"
              size="lg"
              width="100%"
              bg-color="tn-blue">
              确认
            </tn-button>
          </view>
        </tn-form>
      </view>
    </tn-popup>
  </view>
</template>

<script setup lang="ts">
import { defineEmits, ref } from "vue";
import cfsheep from "@/cfsheep";

// 事件传递
const emit = defineEmits(["confirm"]); 

/* ====================== 弹框页面标准处理 START====================== */
// init formData
const formData = ref({
    password:null,
    confirmPassword:null
});

// 显示控制器
const isPopupVisible = ref(false);
// 表单 Ref
const formRef = ref();

// 打开弹窗
const open = async () => {
  isPopupVisible.value = true;
};
// 关闭弹窗
const close = () => {
  isPopupVisible.value = false;
};
// 确认事件
const confirm = () => {
  emit("confirm", formData.value);
  // 关闭弹框
  close();
};

defineExpose({ open }); // 提供 open 方法，用于打开弹窗
</script>

<style></style>
